<template>
  <div class="userinfo">
  <van-nav-bar
      left-arrow
      title="账号管理"
      @click-left="handleBackToMyself"
  ></van-nav-bar>
    <div class="wrapper">
      <div class="account">
         <div class="account-title">
            <span>管理我的账号</span>
         </div>
           <div class="account-list">
              <div class="user-info">
                <img src="http://storage.360buyimg.com/i.imageUpload/6a645f3766396533313763333564633531343435373435373136353435_mid.jpg" class="user-actor">
                   <div class="user_detail">
                     <div class="user-name">丶浪潮丶</div>
                     <div class="user-id">用户名: 37f92317c35dc7</div>
                   </div>
              </div>
              <div class="current-account-tip">
                   当前登陆
              </div>
         </div> 
      </div>
     <div class="actionsarea">
           <ul class="account_manage">
             <li class="item">
               <a href="javascript:void(0);" class="address"> 收货地址管理 </a>
               <span class="text">管理我的地址<i class="iconfont icon-arrow-right"></i></span>
             </li>
             <li class="item">
               <a href="javascript:void(0);" class="address"> 修改手机号 </a>
               <span class="text"> 176*****060 <i class="iconfont icon-arrow-right"></i></span>
             </li>
             <li class="item">
               <a href="javascript:void(0);" class="address">  账号登录密码  </a>
               <span class="text"> 定期修改更安全 <i class="iconfont icon-arrow-right"></i></span>
             </li>
             <li class="item">
               <a href="javascript:void(0);" class="address"> 支付密码 </a>
               <span class="text"> 已设置 <i class="iconfont icon-arrow-right"></i></span>
             </li>
             <li class="item">
               <a href="javascript:void(0);" class="address"> 联系客服 </a>
               <span class="text"> 即时解答用户疑难 <i class="iconfont icon-arrow-right"></i></span>
             </li>
           </ul>
         </div>
         <div class="footer">
           <a href="javascript:void(0);"><img src="//img13.360buyimg.com/jdphoto/jfs/t9715/362/323851365/1279/81de6d72/59cc5903N7d14ca0e.png" />意见反馈</a>
           <a href="javascript:void(0);" @click="logOut"><img src="http://img10.360buyimg.com/jdphoto/jfs/t9052/339/2338090052/1443/912da0a4/59cc5951N10f8f9b3.png" />退出登录</a>
         </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  methods: {
      //返回上一级
      handleBackToMyself () {
          this.$router.go(-1)
      },
      //退出登陆
      logOut () {
         localStorage.removeItem("token")　
         this.$router.push({path: "/"})
      }
  },
}

</script>
<style lang='stylus' scoped>
.van-nav-bar__left .van-nav-bar__arrow
  color #4a4f54
  font-size 20px
.van-nav-bar__left 
    left 6px
.account
  padding 10px 0 5px 0
  margin-top 1px
  font-size 16px
  color #333333
  background-color #ffffff
  .account-title
    padding 2px 10px 0
  .account-list
    background #fff9f9
    border 1px solid #e93b3d
    width 95%
    height 85px
    margin 10px auto
    border-radius 10px
    min-height 75px
    box-sizing border-box
    position relative
    overflow hidden
    font-size 12px
    .current-account-tip
      position absolute
      right 0
      top 0
      padding 1px 10px
      background-color #ffe4e4
      color #e2231a
      border-top-right-radius 10px
      border-bottom-left-radius 10px
    .user-info
      width 100%
      padding 15px 0 10px 10px
      height 85px
      .user-actor
        width 50px
        height 50px
        border-radius 100%
        float left
        margin-right 10px
      .user_detail
        float left
        font-size 12px
        .user-name
          margin-bottom 5px
        .user-id
          color #666666
.actionsarea
  margin-top 10px
  .account_manage
    position relative
    margin-bottom 15px
    .item
      background #fff
      overflow hidden
      margin-top 1px
      &:nth-child(1)
        margin-bottom 10px
      .address
        float left
        height 44px
        line-height 44px
        margin-left 10px
        padding-right 27px
        font-size 16px
        color #333
      .text
        font-size 12px
        color #999
        float right
        height 44px
        line-height 44px
        padding-right 10px
        .iconfont
          font-size 12px
          margin-left 5px
.footer
  display flex
  flex-direction row
  justify-content space-around
  font-size 12px
  margin-top 30px
  a
    color #333333
    img
      width 18px
      height 18px
      margin-right 3px
      margin-bottom 5px
</style>
